// 此处完成购物车逻辑代码
let liTotalSum=0//总价
let liTotalNumber=0//总数
let liTotal=[]
let sum = []
let sumNum=[]
let content = document.querySelector('.content');

let subtract=document.querySelectorAll('.number> .subtract')//减号按钮
let adds=document.querySelectorAll('.number> .adds')//加号按钮
let numberValue=document.querySelectorAll('.number input')//中间的数字
let sumLiTotal=document.querySelectorAll('.subtotal> span')//每个li后面的价格

//渲染全选 .top
let divTop = document.createElement('div');
divTop.innerHTML = `<input type='checkbox'> 全选`;

divTop.classList.add('top');
content.append(divTop);

//渲染ul
let ul = document.createElement('ul');
ul.classList.add('center');
content.append(ul);

//渲染底部bottom
let divBottom = document.createElement('div');
divBottom.classList.add('bottom');
divBottom.innerHTML = `
 <p>总购买数量: ${liTotalNumber}</p>
<p>
  <button class="pay">去结算</button>
  <button class="clear">清空购物车</button>
  <button class="clear_select">删除所有已选中</button>
  <button class="list">返回列表页</button>
</p>
<p class='sum'>总价格 : ￥ <span>${liTotalSum}</span></p>   `;
content.append(divBottom);
//1. 先把list里面的数据渲染出来

list.forEach(function (ele, index) {
   liTotal[index]=Number(ele.price)*Number(ele.buy_num) 
  let li = document.createElement('li');
  li.innerHTML = `
  <div class="select">
  <input type="checkbox">
  </div>
  <div class="pic">
  <img src='${ele.pic}' alt="">
  </div>
  <div class="name">
  ${ele.name}
  </div>
  <div class="price">
   ￥ <span>${ele.price}</span>
  </div>
  <div class="number">
  <button class='subtract'>-</button>
  <input type="text" value="${ele.buy_num}">
  <button class='adds'>+</button>
  </div>
  <div class="subtotal">
  ￥ <span>${liTotal[index]}</span>
  </div>
  <div class="del">
  <button>删除</button>
</div>    `;
  ul.append(li)
});

//2. 能够全选反选同时总价 总购买数量变化
let checkboxSum= document.querySelector('.top input')//全选
let checkboxs =[...document.querySelectorAll('.select input')]//单选
let sumNumber= document.querySelector('.bottom :first-child')//总数
let sumPrice=document.querySelector('.bottom .sum')//总价格


// //全选
checkboxSum.onclick=checkboxSumOnclick
function checkboxSumOnclick(){
  liTotalNumber=0
  liTotalSum=0
  checkboxs.forEach((ele,index)=>{
    addsforeach()
    subtractforeach()
      if(checkboxSum.checked){
        ele.checked=checkboxSum.checked

        liTotalNumber+=list[index].buy_num //总数量变量

        liTotalSum+=list[index].buy_num*list[index].price
      } else{
        ele.checked=false
        if(liTotalNumber<=0||liTotalSum<=0){
          liTotalNumber=0
          liTotalSum=0
        }else{
          liTotalNumber-=list[index].buy_num//总数量
          liTotalSum-=list[index].buy_num*list[index].price
        }
        
      }
     
    })
    sumNumber.innerHTML=`<p>总购买数量: ${liTotalNumber}</p>`
    
    sumPrice.innerHTML=`<p class='sum'>总价格 : ￥ <span>${liTotalSum}</span></p> `
}

// //单个框
checkboxsForEach()
function checkboxsForEach(){
  checkboxs.forEach((ele,index)=>{
    ele.onclick=function(){

      addsforeach()
      subtractforeach()
     if(ele.checked){
      liTotalNumber+=list[index].buy_num
      liTotalSum+=list[index].buy_num*list[index].price

     
     }else{
      if(liTotalNumber<=0||liTotalSum<=0){
        liTotalNumber=0
        liTotalSum=0
      }else{
        liTotalNumber-=list[index].buy_num//总数量
        liTotalSum-=list[index].buy_num*list[index].price
      }
     }
      
      checkboxSum.checked = checkboxs.every(item=>item.checked)//全选根据全部单选变化
      
      
      sumNumber.innerHTML=`<p>总购买数量: ${liTotalNumber}</p>`
      sumPrice.innerHTML=`<p class='sum'>总价格 : ￥ <span>${liTotalSum}</span></p> `
    }
    
  })
}



//3. 单个商品数量能够加减 但是有限制 加减的时候小记价格，总价要变化，总购买数量也要变化


//点击 -
subtractforeach()
function subtractforeach(){


subtract.forEach((item,index)=>{
  
  item.addEventListener('click',function(){
    list[index].buy_num-=1
    //限制最小值大于0
    if(list[index].buy_num<=1){
      list[index].buy_num=1
      item.disabled = 'hidden'
    }
    
    sumNum[index]-=1
    sum[index] =sumNum[index]*list[index].price
    numberValue[index].value=list[index].buy_num  //数字跟随 - 变化
    sumLiTotal[index].innerHTML=`${numberValue[index].value*list[index].price}`//价格跟随 - 变化
    console.log('已单选-',sum,sumNum);
    //+ 生效
    if(numberValue[index].value<list[index].number){
      adds[index].removeAttribute('disabled')
    }
  })
  
})
}
//点击+
 addsforeach()
function addsforeach(){


adds.forEach((item,index)=>{
  

  sum[index] = numberValue[index].value*list[index].price
  sumNum[index] =numberValue[index].value-0
  
     item.addEventListener('click',function(){
    list[index].buy_num+=1
    //限制 点击+的最大值，数字最大时 失效

    if(list[index].buy_num>=list[index].number){
      list[index].buy_num=list[index].number
      item.disabled = 'hidden'
    }
    
    sumNum[index]+=1
    sum[index] =sumNum[index]*list[index].price
    numberValue[index].value=list[index].buy_num //数字跟随 + 变化
    sumLiTotal[index].innerHTML=`${numberValue[index].value*list[index].price}`//价格跟随 - 变化
    console.log('已单选+',sum,sumNum);
    //- 按钮生效
    if(numberValue[index].value>0){
       subtract[index].removeAttribute('disabled')
    }
    
  
  })
 
  
})
}
console.log('已单选后',sum,sumNum);


//4. 能够删除单个商品，删除的同时 总购买数量和总价要变化
let delEl = document.querySelectorAll('.del')
delEl.forEach((ele,index)=>{
  ele.onclick=()=>{
    ele.parentNode.remove()
    
  }
})
//5. 能够删除选中商品，删除的同时 总购买数量和总价要变化
let clearSelect = document.querySelector('.clear_select')
clearSelect.onclick=()=>{
 
  checkboxs.forEach((ele,index)=>{
     if (ele.checked){
        ele.parentNode.parentNode.remove()
        liTotalNumber-= numberValue[index].value
        liTotalSum-=liTotal[index]
    }
  })
  sumNumber.innerHTML=`<p>总购买数量: ${liTotalNumber}</p>`
  sumPrice.innerHTML=`<p class='sum'>总价格 : ￥ <span>${liTotalSum}</span></p> `
}
//6. 能够清空购物车，总数量和总价要对应变化
let shopping = document.querySelector('.clear')
shopping.onclick=()=>{
  checkboxSum.checked=false
  liTotalNumber=0
  liTotalSum=0
  ul.remove()
  sumNumber.innerHTML=`<p>总购买数量: ${liTotalNumber}</p>`
  sumPrice.innerHTML=`<p class='sum'>总价格 : ￥ <span>${liTotalSum}</span></p> `
  checkboxs.forEach((ele,index)=>{
    ele.checked=false
   
  })
}

//TODO 选择好后,点击+,不会增加总数量
